<template>
	<view>
		<view class="venueForm">
			<view>
				<view style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;">请上传场地图片</view>
				<view style="color: #888888;font-size: 26rpx;line-height: 70rpx;">最多上传9张图，且图片宽高建议750*339px</view>
			</view>
			<view>
				<u-upload name="img" :fileList="imgList"  @afterRead="onUpload($event, 'img')"
						@delete="onDelete($event, 'img')"  :maxCount="9"
					width="208rpx" height="208rpx">
				</u-upload>
			</view>
		</view>
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>场地名称</view>
					<input class="fvalue" v-model="venueLocationInfo.locationName"  placeholder="输入场馆名称"  />
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>场地类型</view>
					<view class="fvalue" >
						<picker mode="selector" :range="venueTypeList" range-key="dictValue" @change="onVenueTypeChange">
							<view class="fvalue" >
								{{ venueLocationInfo.locationTypeName || '选择场地类型' }}
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>是否室内</view>
					<view class="fvalue" >
						<picker mode="selector" :range="outsideList" range-key="value" @change="onOutsideChange">
							<view class="fvalue" >
								{{ venueLocationInfo.outsideName || '选择场地是室内/室外' }}
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle">场地面积</view>
					<input class="fvalue" v-model="venueLocationInfo.area" type="digit"  placeholder="输入占地面积"  />
					<view style="font-size: 25rpx;padding-right: 10rpx;">（㎡)</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle">负责人</view>
					<input class="fvalue"  v-model="venueLocationInfo.manager"  placeholder="输入场馆联系人"  />
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle">联系电话</view>
					<input class="fvalue" v-model="venueLocationInfo.contactInfo" type="number"  placeholder="输入联系电话"  />
				</view>
			</view>
		</view>
		
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view class="describe" style="font-size: 30rpx;line-height: 40rpx;">
				<view class="title" style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;">是否开启约球：</view>
				<view>开启后此场地将开放预约权限，用户可选场地时间段预约。</view>
			</view>
			<view style="padding-top: 20rpx;">
				<u-radio-group v-model="venueLocationInfo.isBall" placement="row" activeColor="#06ADAB">
					<u-radio size="35rpx" name="1" label="开启" labelSize="33rpx"></u-radio>
					<u-radio size="35rpx" name="0" label="关闭" :customStyle="{marginLeft: '30rpx'}" labelSize="33rpx"></u-radio>
				</u-radio-group>
			</view>
			<view class="form-row" style="margin-top: 30rpx;">
				<view class="ftitle">约球人数</view>
				<input class="fvalue" v-model="venueLocationInfo.ballUserMax" type="number"  placeholder="输入约球人数"  />
			</view>
		</view>
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view class="describe" style="font-size: 30rpx;line-height: 40rpx;">
				<view class="title" style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;">收费模式：</view>
			</view>
			<view style="padding-top: 20rpx;">
				<u-radio-group v-model="venueLocationInfo.feeModel" placement="row" activeColor="#06ADAB">
					<u-radio size="35rpx" name="1" label="按时段预约收费" labelSize="33rpx"></u-radio>
					<u-radio size="35rpx" name="2" label="按单次收费" :customStyle="{marginLeft: '30rpx'}" labelSize="33rpx"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view style="padding-top: 30rpx;position: sticky;bottom: 0px;z-index: 10;background-color: #ffffff;">
			<view style="padding: 20rpx 40rpx;">
				<u-button text="保存场地" @click="submitNenueLocationApply" color="#155CCF"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//场地ID
				venueLocationId: '',
				//场地类型
				venueTypeList: [],
				//室内室外
				outsideList: [
					{
						key: 1,
						value: '室内'
					},
					{
						key: 2,
						value: '室外'
					}
				],
				//场馆首页图片
				imgList: [],
				//提交表单
				venueLocationInfo: {
					//场地名称
					locationName: '',
					//场地图片
					img: '',
					//场地面积
					area: '',
					//场馆ID
					venueId: uni.getStorageSync('venueId'),
					//场地类型
					locationType: '',
					//场地类型名称
					locationTypeName: '',
					//场地容量
					capacity: '',
					//室内室外（1:室内 2:室外）
					outside: '',
					//室内室外名称显示
					outsideName: '',
					//负责人
					manager: '',
					//联系方式
					contactInfo: '',
					//运营状态：0 未运营 1 运营
					operateStatus: '',
					//是否开启约球（0:关闭 1:开启）
					isBall: '1',
					//约球人数上限
					ballUserMax: '',
					//收费模式(1:按时段预约收费 2:按单次收费)
					feeModel: '1'
				}
			}
		},
		onLoad(option) {
			this.venueLocationId = option.id;
			this.initData();
		},
		methods: {
			async initData(){
				if(this.venueLocationId){
					await this.locationDetail();
				}
				//初始化获取场地类型
				await this.venueTypeDict();
			},
			//场地类型字典
			venueTypeDict(){
				return new Promise((resolve, reject) => {
					this.$request({
						url: '/blade-client-business/app/dict/getDictList',
						type: 'GET',
						data: {'code': 'venue_type'}
					}).then(res => {
						uni.hideLoading();
						this.venueTypeList = res.data;
						if(this.venueLocationId){
							var obj = res.data.find(item => {
								return item.locationType = this.venueLocationInfo.locationType;
							});
							if(obj){
								this.venueLocationInfo.locationTypeName = obj.dictValue;
							}
						}
						resolve(res.data);
					}).catch(err =>{
						reject(err); 
					})
				})
			},
			//场地详情
			locationDetail(){
				return new Promise((resolve, reject) => {
					this.$request({
						url: '/blade-merchant-app/merchant-app/venue-location/location-detail',
						type: 'GET',
						data: {'locationId': this.venueLocationId }
					}).then(res => {
						uni.hideLoading();
						var locationData = res.data;
						this.venueLocationInfo = {
							//场地名称
							locationName: locationData.locationName,
							//场地图片
							img: locationData.img,
							//场地面积
							area: locationData.area,
							//场馆ID
							venueId: uni.getStorageSync('venueId'),
							//场地类型
							locationType: locationData.locationType,
							//场地类型名称
							locationTypeName: '',
							//场地容量
							capacity: locationData.capacity,
							//室内室外（1:室内 2:室外）
							outside: locationData.outside,
							//室内室外名称显示
							outsideName: (locationData.outside===1?'室内':'室外'),
							//负责人
							manager: locationData.manager,
							//联系方式
							contactInfo: locationData.contactInfo,
							//运营状态：0 未运营 1 运营
							operateStatus: locationData.operateStatus,
							//是否开启约球（0:关闭 1:开启）
							isBall: locationData.isBall.toString(),
							//约球人数上限
							ballUserMax: locationData.ballUserMax,
							//收费模式(1:按时段预约收费 2:按单次收费)
							feeModel: locationData.feeModel.toString()
						}
						var imgArry = locationData.img.split(',')
						imgArry.forEach(item => {
							var d = {};
							d.url = item;
							this.imgList.push(d);
						});
						resolve(res.data); 
					}).catch(err =>{
						reject(err); 
					})
				})
			},
			//场地类型改变事件
			onVenueTypeChange(event) {
				const selectedIndex = event.detail.value; // 获取用户选择的选项索引
				const selectedOption = this.venueTypeList[selectedIndex]; // 获取用户选择的选项信息
				this.venueLocationInfo.locationTypeName = selectedOption.dictValue;
				this.venueLocationInfo.locationType = selectedOption.dictKey;
			},
			//室内室外场地选择
			onOutsideChange(event){
				const selectedIndex = event.detail.value; // 获取用户选择的选项索引
				const selectedOption = this.outsideList[selectedIndex]; // 获取用户选择的选项信息
				this.venueLocationInfo.outsideName = selectedOption.value;
				this.venueLocationInfo.outside = selectedOption.key;
			},
			//下一步保存按钮事件
			submitNenueLocationApply(){
				if(this.imgList.length<=0){
					uni.$u.toast("请上传场地图片")
					return ;
				}
				if(!this.venueLocationInfo.locationName){
					uni.$u.toast("请输入场地名称")
					return ;
				}
				if(!this.venueLocationInfo.locationType){
					uni.$u.toast("请选择场地类型")
					return ;
				}
				if(!this.venueLocationInfo.outside){
					uni.$u.toast("请选择是否室内")
					return ;
				}
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认场地资料填写无误，保存场地信息?',
					success: function(res) {
						if (res.confirm) {
							that.saveVenueLocationApply();
						}
					}
				});
			},
			//提交保存
			saveVenueLocationApply(){
				const params = {
					...this.venueLocationInfo
				};
				
				params.img = this.imgList.map(item => item.url).join(',');
				
				var url = '/blade-merchant-app/merchant-app/venue-location/save-location';
				if(this.venueLocationId){
					url = '/blade-merchant-app/merchant-app/venue-location/update-location';
					params.id = this.venueLocationId;
				}
				
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				this.$request({
					url: url,
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					if(res.code == 200){
						uni.showModal({
						   title: '保存成功',
						   content: '可以在场地管理对场地进行管理',
						   showCancel: false,
						   success: function (res) {
							   if (res.confirm) {
								    uni.navigateBack()
							   }
						   }
						});
					} else {
						uni.showModal({
						   title: '保存失败',
						   content: res.msg,
						   showCancel: false,
						   success: function (res) {}
						});
					}
				}).catch(err =>{
					
				})
			},
			// 上传文件
			onUpload(files, type) {
				const {
					file
				} = files;
				let index = this[`${type}List`].length;
				this[`${type}List`].push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				this.$utils.onUploadFile(file.url)
					.then(res => {
						let item = this[`${type}List`][index];
						this[`${type}List`].splice(index, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.link
						}))
					})
			},
			// 删除图片
			onDelete(e, type) {
				this[`${type}List`].splice(e.index, 1);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		
		.bg-f1f1f1 {
			background: #f1f1f1;
		}
		
		.height30 {
			height: 30rpx;
		}
		
		.venueForm {
			padding: 40rpx;
			background-color: #ffffff;
			
			.textareaTitle {
				padding-bottom: 20rpx;font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;
				
				.required {
					color: red;
				}
			}
			
			.form-row {
				border-radius: 0rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 180rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
					
					.required {
						color: red;
					}
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;line-height: 90rpx;
				}
			
			}
			
			
			.submitBtn {
				height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
			}
			
		}
		
	}

</style>
